<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    :root {
      --theme-color: #333;
      --theme-background: #eee;
    }

    /* 更改dark类名下变量的取值 */
    .dark {
      --theme-color: #eee;
      --theme-background: #333;
    }

    /* 更改pink类名下变量的取值 */
    .pink {
      --theme-color: #fff;
      --theme-background: pink;
    }

    .box {
      transition: all .2s;
      width: 100px;
      height: 100px;
      border: 1px solid #000;
      /* 使用变量 */
      color: var(--theme-color);
      background: var(--theme-background);
    }
  </style>
</head>

<body>
<button onclick="changeColor('dark')">dark</button>
<button onclick="changeColor('pink')">pink</button>
<div class="box"></div>

<script>
  function changeColor(params){
    console.log(`variable.html 46`,params);
    // document.querySelector('html').classList.toggle(params);
    document.querySelector('html').classList = params;
  }
</script>

</body>
</html>